<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录页面</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<link type="text/css" rel="stylesheet" href="./css/style.css">
	</head>
	<body>
		<div id="app">
			<div class="login_form">
				<div class="login_box">
					<div class="tit">
						<h1 id="h1_msg">学生登录</h1>
						<a href="regist.html">立即注册</a>
					</div>
					<div class="msg_cont">
						<span id="errorMsg"></span>
					</div>
					<div class="form">
						<form>
							<label>用户名称：</label>
							<input class="itxt" v-model="username" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
							<br />
							<br />
							<label>用户密码：</label>
							<input class="itxt" v-model="password" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
							<br />
							<br />
							<input type="hidden" id="login_type" value="1"/>
							
							<input type="button" @click="login" value="登录" id="sub_btn" />		
						</form>
					</div>
					<div>
						<a id="teacher" @click="stu_login">学生登录>></a>
						<a id="admin" @click="tea_login">教师登录>></a>
						<a id="teacher" @click="admin_login">管理员登录>></a>
					</div>
				</div>
			</div>
		</div>
	<script>
			new Vue({
				  el: '#app',
				  data: {
					  username: '',
					  password: '',
				  },
				  methods:{
					 login:function(){
						 if(this.username!=''){
							 var id_user_type = document.getElementById('login_type').value
							 axios
								  .get('http://localhost:8080/login',{
								  	params:{
								  		username: this.username,
								  		password: this.password,
								  		user_type: id_user_type
								  	}
								  })
								  .then(res => {
								  	console.log(res)
								  	if(res.data=="ok"){
								  		alert("登录成功")
								  	}else if(res.data=="error"){
								  		document.getElementById('errorMsg').innerText="密码错误"
								  	}else if(res.data=="no_user"){
								  		document.getElementById('errorMsg').innerText="用户不存在"
								  	}
								  })
								  .catch(res => alert(res))
							 							
						 }else{
							 document.getElementById('errorMsg').innerHTML="请输入账号"
						 }
					 } ,
					 stu_login:function(){
					 	document.getElementById('h1_msg').innerHTML="学生登录"
					 	document.getElementById('login_type').value="1"
					 },
					 tea_login:function(){
					 	document.getElementById('h1_msg').innerHTML="教师登录"
					 	document.getElementById('login_type').value="2"
					 },
					 admin_login:function(){
					 	document.getElementById('h1_msg').innerHTML="管理员登录"
					 	document.getElementById('login_type').value="3"
					 }
				 },
				 
			  })
		</script>
	</body>
</html>
